<template>
	<div class="page">
		
		<div class="header-view">
			<CMainHeaderView
				:data="account">
			</CMainHeaderView>
		</div>
		
		<div class="menu-view">
			<CMainMenuView>
			</CMainMenuView>
		</div>
		
		<div class="main-view" ref="main">
			<div class="data-view">
				<router-view></router-view>
			</div>
		</div>

	</div>
</template>

<script>
	import CMainMenuView from '@/pages/view/CMainMenuView.vue';
	import CMainHeaderView from '@/pages/view/CMainHeaderView';

	export default {
		components: {
			CMainMenuView,
			CMainHeaderView
		},
		data() {
			return {
				account: null
			}
		},
		mounted() {
			var account = this.$store.getters.account;
			this.account = account;
		},
		methods: {
			onClick(name) {
				if (name == 'goBack') {
					accountCache.clearAccountToken();
					accountCache.clearAccountInfo();
					this.$router.push({
						name: 'userLogin'
					});
				}
			}
		}
	}
</script>

<style scoped>
	.page {
		min-width: 1200px;
		position: relative;
		margin: 0 auto;
		height: 100%;
	}
	
	.header-view {
		background-color: rgb(49, 53, 64);
		height: 100px;
		width: 100%;
	}
	
	.menu-view {
		position: absolute;
		overflow: auto;
		background-color: rgb(49, 53, 64);
		height: calc(100% - 60px);
		height: -moz-calc(100% - 60px);
		height: -webkit-calc(100% - 60px);
		width: 200px;
		overflow-x: hidden; 
		top: 60px;
		left: 0px;
		bottom: 0px;
		z-index: 2;
	}
	
	.main-view {
		position: absolute;
		height: calc(100% - 60px);
		height: -moz-calc(100% - 60px);
		height: -webkit-calc(100% - 60px);
		top: 60px;
		left: 200px;
		right: 0px;
		bottom: 0px;
		overflow: auto;
		background: #F6F6F6;
		padding: 10px;
	}
	
	.data-view {
		min-width: 1040px;
	}
</style>